<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style>
			*{
							padding: 0;
							margin: 0;
						}
						.ziti{
							width:100%;
							height: 50px;
							background-color: black;
						}
						 .zi1{
							width: 1050px;
							height: 50px;
							background-color: black;
							margin: auto;
							float: none;
						}
						.fziti1{
							width: 400px;
							height: 50px;
							background-color: aquamarine;
							float: left;
						}
						.fziti2{
							width: 100px;
							height: 50px;
							background-color: aqua;
							float: right;
						}
						.zi2{
							width: 1050px;
							height: 80px;
							background-color: aqua;
							border: 2px solid rebeccapurple;
							margin: auto;
						}
						.sziti1{
							width:100px ;
							height:80px;
							background-color: aqua;
							border:2px solid red;
							float: left;
						}
						.sziti2{
							width:600px ;
							height:80px;
							background-color: aquamarine;
							border:2px solid green;
							 margin: auto; 
						}
						.sziti3{
							width: 100px;
							height:80px;
							background-color: aquamarine;
							border: 2px solid goldenrod;
							float: right;
							margin-top: -85px;
						}
						.zi3{
							width: 1050px;
							height: 400px;
							background-color: aquamarine;
							border: 2px solid red;
							margin: auto;
						}
						.tziti1{
							width: 200px;
							height: 400px;
							background-color: aqua;
							border: 2px solid pink;
							float: left;
						}
						.tziti2{
							width: 835px;
							height: 400px;
							border: 2px solid gold;
							float: right;
						}
						.zi4{
							width: 1050px;
							height: 200px;
							background-color: aqua;
							border: 2px solid green;
							margin: auto;
						}
						.oziti1{
							width:200px;
							height: 200px;
							background-color: aqua;
							border: 2px solid hotpink;
							float: left;
						}
						.lziti1   {
							width: 64px;
							height: 100px;
							background-color: aqua;
							border: 1px solid rebeccapurple;
							float: left;
						}
						.oziti2{
							width:260px;
							height: 200px;
							background-color: aqua;
							border: 2px solid hotpink;
							float: left;
							margin-left: 15px;
						}
						.oziti3{
							width:260px;
							height: 200px;
							background-color: aqua;
							border: 2px solid hotpink;
							float: left;
							margin-left: 15px;
						}
						.oziti4{
							width:260px;
							height: 200px;
							background-color: aqua;
							border: 2px solid hotpink;
							float: left;
							margin-left: 15px;
						}
						.zi5{
							width: 1050px;
							height: 150px;
							background-color: aqua;
							border: 2px solid chartreuse;
							margin: auto
		</style>
	</head>
	<body>
	<div class="ziti">
				<div class="zi1">
					<div class="fziti1"></div>
					<div class="fziti2"></div>
				</div>
			</div>
			<div class="zi2">
				<div class="sziti1"></div>
				<div class="sziti2"></div>
				<div class="sziti3"></div>
			</div>
			<div class="zi3">
				<div class="tziti1"></div>
				<div class="tziti2"></div>
			</div>
			<div class="zi4">
				<div class="oziti1">
					<div class="lziti1"></div>
					<div class="lziti1"></div>
					<div class="lziti1"></div>
					<div class="lziti1"></div>
					<div class="lziti1"></div>
					<div class="lziti1"></div>
				</div>
				<div class="oziti2"></div>
				<div class="oziti3"></div>
				<div class="oziti4"></div>
			</div>
			<div class="zi5"></div>	
	</body>
</html>
